/**
 * Created by GYL on 2018/7/25
 */
import React, { Component } from 'react';
import { Row, Col, Tabs, Card, DatePicker, Button } from 'antd';
import Container from '../../../components/common/Container';
import style from './DataPan.less';
import LeftTTopTU from '../Echarts/LeftTTopTU';
import LeftTopTU from '../Echarts/LeftTopTU';
import RightTTopTU from '../Echarts/RightTTopTU';
import RightTopTU from '../Echarts/RightTopTU';
import RightBottomTU from '../Echarts/RightBottomTU';
import LeftBottomTU from '../Echarts/LeftBottomTU';
import moment from 'moment';
const { MonthPicker, RangePicker, WeekPicker } = DatePicker;

class DataPan extends Component {
    state = {
        time: moment().format("YYYY-MM-DD"),
        date: moment()
    }

    onDate = (val, v) => {
        console.log(val, v)
        this.setState({
            date: val,
            time: moment(val).format("YYYY-MM-DD")
        })
    }

    //查询按钮
    save = () => {
        this.setState({
            time: moment(this.state.date).format("YYYY-MM-DD")
        })
    }

    render() {
        const windowWidth = document.body.clientWidth;

        const height = document.body.clientHeight;
        let containerHeight = '88vh';
        if (windowWidth > 1367) {
            containerHeight = '88vh';
        }

        const EchartsArr = [
            {
                name: "供应点隐患数量排名(月)",
                moddle: <LeftTTopTU
                    time={this.state.time}
                />,
                title: "月度汇总"
            },
            {
                name: "餐饮企业隐患数量排名(月)",
                moddle: <RightTTopTU
                    time={this.state.time}
                />,
                title: "月度汇总"
            },
            {
                name: "报警总量排名",
                moddle: <LeftTopTU
                    time={this.state.time}
                />,
                title: "月度汇总"
            },
            {
                name: "报警总量环比增幅排名",
                moddle: <RightTopTU
                    time={this.state.time}
                />,
                title: "月度汇总"
            },
            {
                name: "钢瓶库存排名",
                moddle: <LeftBottomTU
                    time={this.state.time}
                />,
                title: "每日汇总"
            },
            {
                name: "考核分数排名",
                moddle: <RightBottomTU
                    time={this.state.time}
                />,
                title: "每日汇总"
            },
        ]

        return (
            <div>
                {/* <Container
                    style={{ height: containerHeight, position: "relative", marginTop: "-1vh", padding: "0px 0px" }}
                    header={true}
                >
                    <Row>
                        <Col span={12} ><span style={{marginLeft:25}}>时间 : </span><DatePicker size="small" onChange={this.onDate} value={this.state.date}/>  <Button type="primary" size="small" onClick={this.save}>查询</Button> <Button size="small">重置</Button></Col>
                    </Row>

                     <Row>
                         {
                             EchartsArr.map((item) => {
                                 return(
                                    <div style={{width:"45%",height:"100%",float:"left",margin:"15px 25px"}}>
                                    <Col span={12} style={{fontWeight:900,textAlign:"left"}}><span style={{width:5,height:16,backgroundColor:"#4187ef",display:"inline-block",verticalAlign:"sub"}}></span> {item.name}({item.title})</Col>
                                    {item.moddle}
                                    </div>
                                 )
                             })
                         }
                        
                       

                        
                    </Row>
                </Container> */}

                <Card className={style.Top_box}
                    bodyStyle={{ padding: "6px 24px" }}
                >
                    <Row>
                        <Col span={12} ><span >时间 : </span><DatePicker size="small" onChange={this.onDate} value={this.state.date} />  <Button type="primary" size="small" onClick={this.save}>查询</Button> <Button size="small">重置</Button></Col>
                    </Row>

                </Card>
                <Row>
                    {
                        EchartsArr.map((item, index) => {
                            return (
                                <Col span={12} key={index}>
                                    <Card className={style.Bottom_box}
                                        bodyStyle={{ padding: "6px 24px" }}
                                    >
                                    <span style={{fontWeight:700}}>{item.name}</span>
                                     {item.moddle}
                                    </Card>
                                </Col>
                            )
                        })
                    }

                </Row>

            </div>
        )
    }
}
export default (DataPan);
